import React, { useState } from "react";
import { history } from "@umijs/max";
import { Form, Input, Button, message, Image } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { setStorage, removeStorage, removeAll } from "@/utils/storage";
import { fetchInnerUserInfo, login, modifyPassword } from '@/services/user';
import './index.less';
import logo from '@/assets/logo/logon_name.png'
import { useModel } from "@umijs/max";
import UpdatePwd from "../modals/UpdatePwd";

const Login = () => {
  const [form] = Form.useForm();
  const { refreshAreaData } = useModel('areaModel');
  const { refreshSettlementWeek } = useModel('settlementWeekModel');
  const { setUserInfo: setInfoToModel } = useModel('userModel');
  const [visible, setVisible] = useState(false);
  const [token, setToken] = useState<string>('');
  const [userInfo, setUserInfo] = useState<any>(null);

  const toIndex = (token: string, userInfo: any) => {
    setStorage('token', token);
    setStorage('userInfo', userInfo);
    setInfoToModel(userInfo);
    refreshAreaData();
    refreshSettlementWeek();
    history.push('/dashboard');
  }

  const handleSubmit = async () => {
    const formParams = await form.validateFields();
    const tokenRes = await login(formParams);
    if (tokenRes?.code === '0') {
      setStorage('token', tokenRes?.data);
      const userRes = await fetchInnerUserInfo();
      if (userRes?.code === '0') {
        const info = userRes?.data;
        if (info?.needModifyPassword) {
            setToken(tokenRes?.data);
            setUserInfo(info);
            setVisible(true);
        } else {
          toIndex(tokenRes?.data, info);
        }
      } else {
        message.warning(userRes?.msg || '获取用户信息失败');
        removeAll();
      }
    } else {
      message.warning(tokenRes?.msg || '登录失败');
    }
  }

  const contentProps = {
    visible,
    onCancel: () => {
      removeAll();
      setVisible(false);
    },
    onSubmit: async (params: any) => {
      const res = await modifyPassword(params);
      if (res?.code === '0') {
        toIndex(token, userInfo);
      }
    }
  }

  return (
    <>
      <div className="login-wrapper">
        <Image
          width={300}
          src={logo}
          preview={false}
        />
        <Form
          form={form}
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={handleSubmit}
        >
          <Form.Item
            name="userName"
            rules={[{ required: true, message: '请输入用户名!' }]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="请输入密码"
            />
          </Form.Item>
          {/* <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住账号</Checkbox>
            </Form.Item>

            <a className="login-form-forgot" href="">
              忘记密码
            </a>
          </Form.Item> */}

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              提交
            </Button>
            {/* 没有账号？ <a href="">点击注册!</a> */}
          </Form.Item>
        </Form>
      </div>
      {visible && <UpdatePwd {...contentProps} />}
    </>
  );
}
export default Login;